<template>
  <div>
    <div class="main">
      <div class="stars">
        <div class="star" v-for="(index) in starsCount" :key="index" ref="star"></div>
      </div>
      <div class="main-title">{{str2}}</div>
    </div>
  </div>
</template>

<script>
import {getRequest} from '@/api/sentences'
export default {
  name: 'star',
  data() {
    return {
      starsCount: 1600, //star数量
      str2: '',
      distance: 600, //间距
      str: '',
      i: 0,
      timer: 0
    }
  },
  mounted () {
    let starArr = this.$refs.star
    starArr.forEach(item => {
      let speed = 0.3 + (Math.random()*1)
      let distance = this.distance + (Math.random()*300)
      item.style.transformOrigin=`0 0 ${distance}px`
      item.style.transform=`translate3d(0, 0, -${distance}px) rotateY(${(Math.random()*360)}deg) rotateX(${(Math.random()*-50)}deg) scale(${speed}, ${speed})`
    })

    if (this.str === '') {
      setTimeout(() => {
        this.typing()
      }, 3000)
    } else {
      this.typing()
    }
  },
  created () {
    this.getSentences()
  },
  methods: {
    typing() {
      if (this.i <= this.str.length) {
        this.str2 = this.str.slice(0, this.i++);
        this.timer = setTimeout(() => {
          this.typing();
        }, 300)
      } else {
        clearTimeout(this.timer)
      }
    },
    // 获取格言句子 {"code":200,"message":"成功!","result":{"name":"留连光景惜朱颜，黄昏独倚阑。","from":"李煜《阮郎归·呈郑王十二弟》"}}
    getSentences() {
      getRequest().then(res => {
        let name = res.data.result.name
        let from = res.data.result.from
        this.str = name + '——' + from
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  min-width: 1600px;
  height: 200px;
  background-color: #fff;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
  filter: drop-shadow(0 0 10px white);
  position: relative;
  .main-title {
    position: absolute;
    left: 50%;
    top: 80px;
    transform: translateX(-50%);
    font-size: 20px;
    color: rgba(255,255,255,1);
    &::after {
      content: '';
      position: absolute;
      left: 48%;
      transform: translateX(-50%);
      bottom: -28px;
      width: 100px;
      height: 4px;
      background: rgba(244,54,63,1);
      border-radius: 2px;
    }
  }
}
.stars {
  transform: perspective(500px);
  transform-style: preserve-3d;
  position: absolute;
  perspective-origin: 50% 100%;
  left: 50%;
  animation: rotate 90s infinite linear;
  bottom: -256px;
  .star {
    width: 2px;
    height: 2px;
    background: #f7f7b8;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
  }
  @keyframes rotate {
    0% {
      transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
    }
    100% {
      transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
    }
  }
}

</style>
